<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuimini/css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote">
            Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>
        </blockquote>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>组织结构</legend>
            </fieldset>
            <div id="tree" ></div>
        </div>
        <div class="layui-col-md8">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend id="organ_name">全部人员</legend>
            </fieldset>
        </div>
    </div>
</div>
<script src="/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'tree','util'], function () {
        var $ = layui.jquery;
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
            ,data1 = [{
            title: '江西'
            ,id: 1
            ,children: [{
                title: '南昌'
                ,id: 1000
                ,children: [{
                    title: '青山湖区'
                    ,id: 10001
                },{
                    title: '高新区'
                    ,id: 10002
                }]
            },{
                title: '九江'
                ,id: 1001
            },{
                title: '赣州'
                ,id: 1002
            }]
        },{
            title: '广西'
            ,id: 2
            ,children: [{
                title: '南宁'
                ,id: 2000
            },{
                title: '桂林'
                ,id: 2001
            }]
        },{
            title: '陕西'
            ,id: 3
            ,children: [{
                title: '西安'
                ,id: 3000
            },{
                title: '延安'
                ,id: 3001
            }]
        }];

        $.ajax({
            type:'get',
            url:'/organ/tree',
            dataType:'json',
            success:function (res)
            {
                tree.render({
                    elem: '#tree'
                    ,spread:false
                    ,data: res
                    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                    ,click: function(obj){
                        $("#organ_name").text(obj.data.name);
                        layer.msg(JSON.stringify(obj.data));
                    }
                });
            }
        });
        //仅节点左侧图标控制收缩

    });

</script>
</body>